<template>
  <div style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" :style="{'background':!!homeAnalysisLoanMonthNum.back?homeAnalysisLoanMonthNum.back:'#fff'}" :id="homeAnalysisLoanMonthNum.id" class="_wz_char">

  </div>
</template>
<script>
  export default {
    props: ["leftHeight", "homeAnalysisLoanMonthNum"],//接收来自父组件的数据
    data() {
      return {}
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;
      let data = that.homeAnalysisLoanMonthNum.data;
      let padding = [20, 10, 50, 20]
      if (!!that.homeAnalysisLoanMonthNum.style) {
        if (!!that.homeAnalysisLoanMonthNum.style.padding) {
          padding = that.homeAnalysisLoanMonthNum.style.padding
        }
      }
      const chart = new G2.Chart({
        container: that.homeAnalysisLoanMonthNum.id,
        forceFit: true,
        height: that.leftHeight,
        padding: padding
      });
      chart.source(data);
      chart.source(data, {
        value: {
          min: 0,
          alias: that.homeAnalysisLoanMonthNum.unit
        },
        year: {
          range: [0, 1]
        }
      });



      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      if(!!that.homeAnalysisLoanMonthNum.list){
        chart.area().position('year*value').color([ '#40a9ff', '#1890ff', '#096dd9', '#0050b3' ]);
        chart.line().position('year*value').color([ '#40a9ff', '#1890ff', '#096dd9', '#0050b3' ]).size(2);
      }else{
        chart.area().position('year*value').color('type');
        chart.line().position('year*value').color('type').size(2);
      }

      chart.render();
    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
